<!-- 收藏页面 -->
<template>
	<Card :card="card" />
	<!-- 上拉加载提示 -->
	<view class="loading-height">
		<Loading v-if="loading"></Loading>
	</view>
	<!-- 没有数据的提示 -->
	<view class="tips" v-if="card.length == 0">你还没有商品收藏哦~</view>
</template>

<script setup>
	import { reactive, toRefs } from 'vue'
	import Card from "../../components/card-goods.vue"
	import Loading from "../../components/loading.vue"
	import { onShow } from '@dcloudio/uni-app'
	import { onReachBottom } from '@dcloudio/uni-app'

	const data = reactive({
		card: [], // 商品
		loading: false, // 上拉加载小圆圈
		pageNum: 0, // 请求的页数，每请求一次，页数 +1
	})
	const { card } = toRefs(data)

	onShow(() => {
		console.log("1111",111);
		data.card = []
		getData()
	})
	

	// 1、获取数据
	async function getData(skip = 0) {
		// 聚合连表查询（结合云函数），一次性查询两个数据库
		const res = await wx.cloud.callFunction({ 
			name: 'collection',  // 请求云函数的名称 
			data: { skip }  // 携带的数据
		})
		// console.log("res111",res);
		data.card = [...data.card, ...res.result]
	}

	// 2、上拉加载
	onReachBottom(async () => {
		data.loading = true
		data.pageNum++
		let skip = data.pageNum * 10
		await getData(skip)
		data.loading = false
	})
</script>

<style>
	page {
		background-color: #f4f4f4;
	}
</style>
